@import 'color-definition';

/* ****************************************************************************************************************** */
/* Color definition                                                                                                   */
/* ****************************************************************************************************************** */

/* ****************************************************************************************************************** */
/* LEVEL ONE                                                                                                          */
/* ****************************************************************************************************************** */
ul.dropdown                         { position: relative; list-style-type: none; margin-top: 0px;
                                        margin-bottom: 0px; height: 20px; margin-left: 8px;}
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; margin-left: 8px;}
ul.dropdown a:hover		            { color: $color-primary-1; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background-color: $color-primary-1; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* ****************************************************************************************************************** */
/* LEVEL TWO                                                                                                          */
/* ****************************************************************************************************************** */
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%;
                                        left: 0; list-style-type: none;}
ul.dropdown ul li 					{ font-weight: normal; background-color: $color-primary-1; color: $color-primary-4;
									  border-bottom: 1px solid #ccc; float: none; left: -48px; position: relative;}

ul.dropdown ul li.hover				{ background-color: $color-primary-2; }

ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; }

/* ****************************************************************************************************************** */
/* LEVEL THREE                                                                                                        */
/* ****************************************************************************************************************** */
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }